<template>
	<view class="mask" v-if="showMask" @click.self="closeMask">
		<view class="list_ul">
			<view class="list_li" @click="closeMasks">关于我们</view>
			<view class="list_li" v-for="(item,index) in list" :key="index" @click="ins(item.title,item.id)">
				{{item.title}}
			</view>
			<view class="list_li" @click="closeMasksss">
				门店展示
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			showMask: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: []
			},
			routeUrl: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				tabIndex: 0
			};
		},
		onLoad() {},
		onShow() {},
		methods: {
			ins(title, id) {
				// 获取页面栈
				let pages = getCurrentPages();
				// 获取当前页面的实例
				let currentPage = pages[pages.length - 1];
				const url = currentPage.route
				if (url == 'zxcadd/about/list') {
					const obj = {
						name: title,
						id: id
					}
					this.$emit('customEvents', obj);
					this.$emit('customEvent', false);
				} else {
					uni.navigateTo({
						url: '/zxcadd/about/list?name=' + title + '&id=' + id
					})
				}
			},
			closeMask() {
				this.$emit('customEvent', false);
			},
			closeMasks() {
				if (this.routeUrl == 1) {
					this.$emit('customEvent', false);
				} else if (this.routeUrl == 2) {
					uni.navigateBack()
				} else {
					this.$util.goUrl({
						url: '/zxcadd/about/index',
						openType: `reLaunch`
					})
				}
			},
			closeMasksss() {
				uni.navigateTo({
					url: '/user/pages/nearbyStores'
				})
			}
		}
	}
</script>

<style scoped>
	.mask {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99;
		position: fixed;
		top: 0;
		left: 0;
	}

	.list_ul {
		position: fixed;
		left: 21%;
		bottom: calc(98rpx + env(safe-area-inset-bottom) / 2);
		background-color: #fff;
		z-index: 100;
		width: 250rpx;
	}

	.list_li {
		border-bottom: 2rpx solid #dedede;
		padding: 20rpx;
		font-size: 28rpx;
		color: #000;
		text-align: center;
	}

	.list_li_active {
		color: #1eb481;
	}
</style>